<template>
    <div class="myorder-box">
        <div class="myorder-return">
            <i @click="myordereturn()" class=" myorderticon iconfont icon-jiantou"></i>
            <van-dropdown-menu style="position: fixed;top: 0;width: 100%;z-index: 10;">
                <van-dropdown-item v-model="activeIndex" :options="listShop" />
            </van-dropdown-menu>
        </div>
        <ul class="myorder-tittle">
            <li :class="index===0 ? 'active':''" @click="allshop(0)">
                全部
            </li >
            <li :class="index===1 ? 'active':''" @click="allshop(1)">
                已付款
            </li>
            <li :class="index===2 ? 'active':''" @click="allshop(2)">
                已完成
            </li>
            <li :class="index===3 ? 'active':''" @click="allshop(3)">
                已失效
            </li>
        </ul>
        <div class="myorder-all" v-if="listAry.length>0">
<!--            全部-->
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
                <ul class="myorder-all-box" v-if="activeIndex == 0">
                    <li v-for="val in listAry">
                        <p>
                            <b class="tittle-box">{{val.orderType}}</b>
                            &nbsp {{val.sellerNick}} 
                            <span class="sepclo" v-if="val.tkStatus == 12 || val.tkStatus == 14">已付款</span>
                            <span class="sepclo" v-if="val.tkStatus == 13">已失效</span>
                            <span class="sepclo" v-if="val.tkStatus == 3">已完成</span>
                        </p>
                        <div class="myorder-information">
                            <img :src="'http:'+val.itemImg" alt="">
                            <div class="myorder-information-content">{{val.itemTitle}}</div>
                            <div class="myorder-information-right">
                                <h5>￥{{val.alipayTotalPrice}}</h5>
                                <h6>x {{val.itemNum}}</h6>
                            </div>
                            <div style="clear: both"></div>
                            <div class="information-bottom">
                                <!-- <div class="information-bottom-left">
                                    来自 Bobo 的订单
                                </div> -->
                                <div class="information-bottom-right">
                                    订单总价 ¥{{val.alipayTotalPrice}}
                                    <span>赚取佣金 ¥{{(val.alipayTotalPrice*val.totalCommissionRate*ownRate/100).toFixed(2)}}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="myorder-all-box" v-if="activeIndex == 1">
                    <li v-for="val in listAry">
                        <p>
                            <b class="tittle-box">拼多多</b>
                            <span class="sepclo" v-if="val.orderStatus == 1">未支付</span>
                            <span class="sepclo" v-if="val.orderStatus == 0">已支付</span>
                            <span class="sepclo" v-if="val.orderStatus == 2">确认收货</span>
                            <span class="sepclo" v-if="val.orderStatus == 3">审核成功</span>
                            <span class="sepclo" v-if="val.orderStatus == 4">审核失败</span>
                            <span class="sepclo" v-if="val.orderStatus == 5">已经结算</span>
                            <span class="sepclo" v-if="val.orderStatus == 8">非多多进宝商品</span>
                        </p>
                        <div class="myorder-information">
                            <img :src="val.goodsThumbnailUrl" alt="">
                            <div class="myorder-information-content">{{val.goodsName}}</div>
                            <div class="myorder-information-right">
                                <h5>￥{{(val.goodsPrice)/100}}</h5>
                                <h6>x {{val.goodsQuantity}}</h6>
                            </div>
                            <div style="clear: both"></div>
                            <div class="information-bottom">
                                <!-- <div class="information-bottoPm-left">
                                    来自 Bobo 的订单
                                </div> -->
                                <div class="information-bottom-right">
                                    订单总价 ¥{{val.orderAmount/100}}
                                    <span>赚取佣金 ¥{{(val.promotionAmount*ownRate/100).toFixed(2)}}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="myorder-all-box" v-if="activeIndex == 2">
                    <li v-for="val in listAry">
                        <p>
                            <b class="tittle-box">京东</b>
                            <span class="sepclo" v-if="val.validCode !=15 && val.validCode !=16 && val.validCode !=17 && val.validCode !=18">已失效</span>
                            <span class="sepclo" v-if="val.validCode == 15">未支付</span>
                            <span class="sepclo" v-if="val.validCode == 16">已支付</span>
                            <span class="sepclo" v-if="val.validCode == 17">已完成</span>
                            <span class="sepclo" v-if="val.validCode == 18">已经结算</span>
                        </p>
                        <div class="myorder-information">
                            <img :src="val.imgUrl" alt="">
                            <div class="myorder-information-content">{{val.skuName}}</div>
                            <div class="myorder-information-right">
                                <h5>￥{{val.price}}</h5>
                                <h6>x {{val.skuNum}}</h6>
                            </div>
                            <div style="clear: both"></div>
                            <div class="information-bottom">
                                <!-- <div class="information-bottoPm-left">
                                    来自 Bobo 的订单
                                </div> -->
                                <div class="information-bottom-right">
                                    订单总价 ¥{{val.estimateCosPrice}}
                                    <span>赚取佣金 ¥{{(val.estimateFee*ownRate).toFixed(2)}}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </van-list>
        </div>
        <noData v-else></noData>
    </div>
</template>

<script>
    import noData from '../public/noData';
    import { DropdownMenu, DropdownItem, List } from 'vant';
    export default {
        name: "myorder",
        data(){
            return{
                index:0,
                listAry:[],
                activeIndex:0,
                userId:"",
                loading: false,
                finished: false,
                num:0,
                total:0,
                listShop: [
                    { text: '淘宝', value: 0 },
                    { text: '拼多多', value: 1 },
                    { text: '京东', value: 2 },
                ],
                ownRate:0.6
            }
        },
        watch: {
            activeIndex(val){
                this.num = 0;
                this.total = 0;
                this.listAry = [];
                this.onLoad();
            },
            index(val){
                this.num = 0;
                this.total = 0;
                this.listAry = [];
                this.onLoad();
            },
        },
        mounted() {
            this.userId=localStorage.getItem('user_id');
            this.initData();
            this.onLoad();
        },
        components: {
            [DropdownMenu.name]: DropdownMenu,
            [DropdownItem.name]: DropdownItem,
            [List.name]:List,
            noData,
        },
        methods:{
            onLoad() {
                var that = this;
                that.num++;
                var state;
                if(that.activeIndex == 0){
                    if(that.index == 0){
                        state = ""
                    }
                    if(that.index == 1){
                        state = 14
                    }
                    if(that.index == 2){
                        state = 3
                    }
                    if(that.index == 3){
                        state = 13
                    }
                    this.$http.post(that.utils.config + "/netmall/app/taobao/api/queryOrders?pageNo="+that.num+"&pageSize=10&user_id="+that.userId+"&tkStatus="+state).then((data) => {
                        if (data.data.success) {
                            // that.total = data.data.result.total;
                            for(let i=0;i<data.data.result.length;i++){
                                that.listAry.push(data.data.result[i]);
                                that.loading = false;
                            }
                                that.finished = true;
                            // if(that.total == that.listAry.length){
                            // }
                        }else{
                            that.listAry=[];
                        }
                    })
                }
                if(that.activeIndex == 1){
                    if(that.index == 0){
                        state = ""
                    }
                    if(that.index == 1){
                        state = 0
                    }
                    if(that.index == 2){
                        state = 5
                    }
                    if(that.index == 3){
                        state = 4
                    }
                    that.$http.post(that.utils.config + "/netmall/app/pdd/api/queryOrders?pageNo="+that.num+"&pageSize=10&user_id="+that.userId+"&orderStatus="+state).then((data) => {
                        if (data.data.success) {
                            // that.total = data.data.result.total;
                            for(let i=0;i<data.data.result.length;i++){
                                that.listAry.push(data.data.result[i]);
                                that.loading = false;
                            }
                            // if(that.total == that.listAry.length){
                            //     that.finished = true;
                            // }
                        }
                    })
                }
                if(that.activeIndex == 2){
                    if(that.index == 0){
                        state = ""
                    }
                    if(that.index == 1){
                        state = 16
                    }
                    if(that.index == 2){
                        state = 18
                    }
                    if(that.index == 3){
                        state = 3
                    }
                    that.$http.post(that.utils.config + "/netmall/app/jd/api/getJDOrders?pageNo="+that.num+"&pageSize=10&user_id="+that.userId+"&validCode="+state).then((data) => {
                        if (data.data.success) {
                            that.total = data.data.result.total;
                            for(let i=0;i<data.data.result.records.length;i++){
                                data.data.result.records[i].imgUrl = JSON.parse(data.data.result.records[i].orderDetails)[0].imageInfo.imageList[0].url;
                                console.log(data.data.result.records[i].imgUrl)
                                that.listAry.push(data.data.result.records[i]);
                                that.loading = false;
                            }
                            if(that.total == that.listAry.length){
                                that.finished = true;
                            }
                        }
                    })
                }
            },
            initData(){                
                // this.$http.post(this.utils.config + "/netmall/app/pdd/api/order/queryOrders?pageNo="+this.num+"&pageSize=10&user_id="+this.userId).then((data) => {
                //         console.log(data)
                //     if (data.data.success) {
                //     }
                // })
                this.$http.post(this.utils.config+"/netmall/app/person/api/getPersonCenterData?user_id="+this.userId).then((data) => {
                    this.ownRate = data.data.result.tbMnUser.ownRate/100;
                })
            },
            myordereturn(){
                this.$router.go(-1);
            },
            allshop(index){
                this.index=index;
                // if(this.index!==0){
                //     this.myAll=false
                // }else {
                //     this.myAll=true
                // }
                // if(this.index===1){
                //     this.paymentAll=true
                // }else {
                //     this.paymentAll=false
                // }
                // if(this.index===3){
                //     this.closeAll=true
                // }else {
                //     this.closeAll=false
                // }
            } ,
        }

    }
</script>

<style scoped>
    @import url("../../assets/font/iconfont.css");
    .myorder-return{
        width: 100%;
        padding: 12px 0 0 0;
        height: 56px;
        text-align: center;
        position: relative;
        background:rgba(255,255,255,1);
    }
    .myorder-return span{
        margin-top: 12px;
        font-size:16px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(51,51,51,1);
        line-height:22px;
    }
    .myorderticon{
        font-size: 18px;
        color: #000000;
        font-weight: 900;
        position: absolute;
        top: 12px;
        left: 14px;
        z-index: 11;
    }
    .myorder-box{
        min-height: 100%;
        width: 100%;
    }
    .myorder-tittle{
        height: 32px;
        width: 100%;
        background:rgba(255,255,255,1);
        display: flex;
        justify-content: space-around;
        font-size:16px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:24px;
        text-align: center;

    }
    .myorder-tittle li{
         width: 25%;
    }
    .active{
        font-size:16px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:400;
        color:rgba(255,46,103,1);
        line-height:24px;
        position: relative;
    }
    .active::before{
        content: "";
        position: absolute;
        bottom: 0px;
        left: 30%;
        width:37px;
        height:3px;
        background:rgba(255,46,103,1);
        border-radius:1px;
    }
    .myorder-all{
        padding: 0 10px;

    }
    .myorder-all-box li{
        margin-top: 10px;
        width:100%;
        height: 160px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        overflow: hidden;
    }
    .myorder-all-box p{
        margin-top: 14px;
        padding: 0 10px;
        height: 20px;
        font-size:14px;
        font-family:SourceHanSansSC-Medium,SourceHanSansSC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:20px;
    }
    .tittle-box{
        position: relative;
        top: -1px;
        text-align: center;
        display: inline-block;
        width:30px;
        height:15px;
        background:rgba(255,46,103,1);
        border-radius:4px;
        font-size:10px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:15px;
    }
    .myorder-all-box p span{
        display: inline-block;
        float: right;
        font-size:14px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(255,46,103,1);
        line-height:20px;
    }
    .myorder-information{
        height: 56px;
        width: 100%;
        margin-top: 17px;
        padding: 0 10px;
    }
    .myorder-information img{
        display: inline-block;
        width:55px;
        height:56px;
        background:rgba(216,216,216,1);
        border-radius:6px;
        float: left;
    }
    .myorder-information-content{
        width:198px;
        height:40px;
        font-size:14px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:20px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        float: left;
        margin: 8px 0 0 8px;
    }
    .myorder-information-right{
        height: 56px;
        float: right;
        text-align: right;
        margin-top: 14px;
    }
    h5{
        font-size:14px;
        font-family:Roboto-Regular,Roboto;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:16px;
    }
    h6{
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:18px;
    }
    .information-bottom{
        margin-top: 4px;
        width: 100%;
        height: 18px;

    }
    .information-bottom-left{
        width: 40%;
        float: left;
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:18px;
    }
    .information-bottom-right{
        width: 60%;
        float: right;
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:18px;
        text-align: right;
    }
    .information-bottom-right span{
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(227,143,110,1);
        line-height:18px;
    }
    .sepclo{
        display: inline-block;
        float: right;
        font-size:14px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(136,136,136,1)!important;
        line-height:20px;
    }


</style>
